<!DOCTYPE html>
<html lang="zh">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>520</title>
  <style>
    body,
    table,
    tr,
    td {
      margin: 0;
      padding: 0;
    }

    body {
      background: radial-gradient(49% 160%, #22b5ff 0, #3a72fa 100%)
    }

    .wrapper {
      position: relative;
      width: 300px;
      height: 300px;
      text-align: center;
      margin: 0 auto;
    }

    table {
      display: inline-block;
    }

    td,
    th {
      width: 100px;
      height: 100px;
      background-color: #fff;
      border-radius: 10px;
      border: 4px solid #22b5ff;
      color: #000
    }

    th {
      cursor: pointer;
      user-select: none;
    }

    tr .active {
      background-color: #D92B2F;
      color: #fff
    }

    .results {
      display: none;
      width: 200px;
      height: 100px;
      border: 1px solid black;
      border-radius: 30px;
      text-align: center;
      line-height: 100px;
      background-color: skyblue;
      margin: 50px auto;
    }


    .lottery {
      animation: changeBg .5s ease infinite;
      overflow: hidden;
      padding: 20px;
      width: 400px;
      margin: 0 auto;
      background-repeat: no-repeat;
      background-size: 100% 100%;
    }


    .mask {
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.7);
      position: fixed;
      overflow: hidden;
      z-index: 222;
      top: 0;
      left: 0;
    }


    .lottery-alert {
      max-width: 300px;
      text-align: center;
      z-index: 10000;
      border-radius: 10px;
      background: #fff;
      padding: 20px;
      position: fixed;
      left: 0;
      right: 0;
      margin: auto;
      top: 50%;
      transform: translateY(-50%);
    }

    .lottery-alert h1 {
      font-size: 18px;
      font-weight: bold;
      color: #D92B2F;
    }

    .lottery-alert img {
      display: block;
      height: 120px;
      margin: 0 auto;
    }

    .lottery-alert h2 {
      font-weight: normal;
      color: #D92B2F;
      font-size: 15px;
      padding-top: 15px;
    }

    .lottery-alert p {
      color: #666;
      font-size: 16px;
      padding-top: 5px;
    }

    .lottery-alert .btnsave {
      border-radius: 3px;
      box-shadow: none;
      height: 40px;
      cursor: pointer;
      line-height: 40px;
      color: #fff;
      margin-top: 12px;
      background: linear-gradient(180deg, rgba(213, 60, 63, 1) 0%, rgba(201, 20, 24, 1) 100%);
      font-size: 16px;
    }
  </style>
</head>

<body>
  <div style="margin-top: 100px;">
    <div style="margin-bottom: 48px;color: #fff;font-size: 28px;text-align: center;">❤️ 抽取你的520礼物吧 ❤️</div>
    <div class="wrapper">
      <table>
        <tr>
          <td>0</td>
          <td>1</td>
          <td>2</td>
        </tr>
        <tr>
          <td>3</td>
          <td id="play" style="background-color: #D92B2F;color: #fff;font-size: 18px;font-weight: 700;">抽取</td>
          <td>5</td>
        </tr>
        <tr>
          <td>6</td>
          <td>7</td>
          <td>8</td>
        </tr>
      </table>
    </div>
  </div>

  <!-- <div class="results">结果</div> -->

  <div class="mask" style="display: none;"></div>
  <div class="lottery-alert" style="display: none;">
    <h1>恭喜您</h1>
    <h2 id="result"></h2>
  </div>

  <script>
    var playBtn = document.getElementById('play')
    var tdAry = document.getElementsByTagName('td')
    var mask = document.getElementsByClassName('mask')[0]
    var alter = document.getElementsByClassName('lottery-alert')[0]

    var tdLen = tdAry.length
    var startTime = null
    // var tdList = [0, 1, 2, 4, 7, 6, 5, 3]
    var tdList = [0, 1, 2, 5, 8, 7, 6, 3]

    var tdId = 0
    var time = 0
    var fixNum = 24
    var MaxNum
    var randomNum
    var result = document.getElementById('result')

    alter.onclick = save
    mask.onclick = save

    function save() {
      mask.style.display = 'none'
      alter.style.display = 'none'
      result.innerText = ''
    }


    playBtn.onclick = playStart

    function playStart() {
      if (startTime !== null) {
        return;
      }
      playBtn.style.backgroundColor = 'gray'
      time = 0
      MaxNum = parseInt(Math.random() * 9) + fixNum
      randomNum = parseInt(Math.random() * 5 + 3)
      startTime = setInterval(move, 200)
    }

    function move() {
      time++
      tdAry[tdList[tdId]].className = ""
      tdId++
      tdId = tdId > 7 ? 0 : tdId
      tdAry[tdList[tdId]].className = "active"
      if (time == randomNum) {
        clearInterval(startTime)
        startTime = setInterval(move, 20)
      }
      if (time + randomNum >= MaxNum) {
        clearInterval(startTime)
        startTime = setInterval(move, 200)
      }
      if (time >= MaxNum) {
        setTimeout(showMask, 1000)
      }
    }

    function showMask() {
      clearInterval(startTime)
      startTime = null
      switch (tdList[tdId]) {
        case 0:
          mask.style.display = 'block'
          alter.style.display = 'block'
          result.innerText = '0'
          break;
        case 1:
          mask.style.display = 'block'
          alter.style.display = 'block'
          result.innerText = '1'
          break;
        case 2:
          mask.style.display = 'block'
          alter.style.display = 'block'
          result.innerText = '2'
          break;
        case 5:
          mask.style.display = 'block'
          alter.style.display = 'block'
          result.innerText = '5'
          break;
        case 8:
          mask.style.display = 'block'
          alter.style.display = 'block'
          result.innerText = '8'
          break;
        case 7:
          mask.style.display = 'block'
          alter.style.display = 'block'
          result.innerText = '7'
          break;
        case 6:
          mask.style.display = 'block'
          alter.style.display = 'block'
          result.innerText = '6'
          break;
        case 3:
          mask.style.display = 'block'
          alter.style.display = 'block'
          result.innerText = '3'
          break;
      }
      tdAry[tdList[tdId]].className = ""
      playBtn.style.backgroundColor = '#D92B2F'
      return;
    }

  </script>
</body>

</html>